.traffic-light {
  width: 100px;
  /* 容器样式 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #333;
  border-radius: 10px;
}

.light-contaniner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #666; /* 默认灰色状态 */
  transition: background 0.3s ease;
}

/* 定义颜色模板（默认隐藏） */
.light.green { --active-color: #00ff00; }
.light.yellow { --active-color: #ffff00; }
.light.red { --active-color: #ff0000; }

/* 激活状态 */
.traffic-light.green .light.green,
.traffic-light.yellow .light.yellow,
.traffic-light.red .light.red {
  background: var(--active-color); /* 使用CSS变量 */
  box-shadow: 0 0 20px var(--active-color); /* 可选发光效果 */
}


.time {
  margin-top: 40px;
  font-size: 60px;
  font-weight: 600;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #fff;
}
